<template>
  <div>
      <!-- 头部面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/wlecome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片区域 -->
      <el-card class="rights_card">
        <el-table :data="rights_lists" style="width: 100%" stripe border fit>
            <el-table-column type="index" label="#">
            </el-table-column>
            <el-table-column
                prop="authName"
                label="权限名称">
            </el-table-column>
            <el-table-column
                prop="path"
                label="路劲">
            </el-table-column>
            <el-table-column>
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.level == '0'? true : false" type="success">一级</el-tag>
                    <el-tag v-if="scope.row.level == '1'? true : false" type="info">二级</el-tag>
                    <el-tag v-if="scope.row.level == '2'? true : false">三级</el-tag>
                </template>
            </el-table-column>
        </el-table>
      </el-card>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                rights_lists:[]
            }
        },
        methods: {
            // 获取权限列表数据的函数
            async get_rights_lists_fun() {
                const {data: res_data} = await this.$axios.get('rights/list');
                if(res_data.meta.status != 200) return this.$Message.error('获取权限列表失败!');
                this.rights_lists = res_data.data;
                return this.$Message.success('获取权限列表成功'); 
          }  
        },
        mounted() {
            // 获取权限列表
            this.get_rights_lists_fun();
        }
    }
</script>

<style>
    .rights_card {
        margin-top: 20px;
    }
    .el-tag {
        margin-left: 50px;
    }
</style>